<template>
  <!-- 2B63A1 -->
  <!-- background: rgba(43,99,161,0.3); -->
  <!-- .ant-alert-info -->
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="registerModal"
    showFooter
    title="数据权限"
    width="40rem"
    @ok="handleSubmit"
  >
    <div style="padding-left: 4px" v-if="treeData">
      <Alert
        class="custom-ant-alert-info"
        :closable="true"
        message="修改权限后，请角色相关用户重新登录起效。"
        show-icon
      />
      <BasicTree
        v-model:checkedKeys="checkeds"
        :fieldNames="{ key: 'id', title: 'name' }"
        :treeData="treeData"
        :checkable="true"
        defaultExpandLevel="1"
      />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Alert } from 'ant-design-vue';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getModulesRoleListApiData, updateModulesRoleApiData } from '/@/api/admin/menu';

  export default defineComponent({
    name: 'RoleAuth',
    components: { Alert, BasicModal, BasicTree },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const updateId = ref();
      const { createMessage } = useMessage();
      const treeData = ref<TreeItem[]>();
      const checkeds = ref<string[]>([]);
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: true });

        updateId.value = data?.record.roleId;
        const { tree, checkedKeys } = await getModulesRoleListApiData(updateId.value);
        console.log(
          '%ctree, checkKey===>63： ',
          'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
          tree,
          checkedKeys,
        );
        treeData.value = tree;
        nextTick(() => {
          checkeds.value = checkedKeys;
        });
        setModalProps({ confirmLoading: false });
      });

      // async function getModulesRoleList(roleId) {
      //   const res = await getModulesRoleListApi({ roleId });
      //   return { ...res };
      // }

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });
          console.log(
            '%ccheckeds===>64： ',
            'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
            checkeds,
          );

          await updateModulesRoleApiData({ roleId: updateId.value, checkedKeys: checkeds.value });
          closeModal();
          createMessage.success('操作成功');
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        registerModal,
        handleSubmit,
        treeData,
        checkeds,
      };
    },
  });
</script>

<style scoped lang="less">
  :deep(.custom-ant-alert-info.custom-ant-alert-info) {
    background-color: rgba(43, 99, 161, 0.08) !important;
  }
</style>
